﻿<link href="~/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.js"></script>

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'西部',border:false,split:true" style="width:260px;border-right-width:1px;">
        <div class="easyui-toolbar">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true">刷新</a>
        </div>
        <ul id="tree" class="easyui-tree" data-options="url:'/Jsons/Tree/tree-common-data.json',method:'get'"></ul>
    </div>
    <div data-options="region:'center',title:'中部',border:false" style="border-left-width:1px;">
        <table id="dg"></table>
    </div>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };
        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal);

            return result;
        };

        var toolbar = $("<div />").appendTo("body").toolbar({
            data: [
                { text: "新增", iconCls: "icon-add", type: "button" },
                { text: "编辑", iconCls: "icon-edit", type: "button" },
                { text: "删除", iconCls: "icon-remove", type: "button" },
                { text: "刷新", iconCls: "icon-reload", type: "button" },
                "-",
                { type: "textbox", width: 90 },
                { text: "搜索", iconCls: "icon-search", type: "button", onclick: function () { } },
                "-",
                "<span style='color:red;'>本演示中的按钮都没有具体效果，只为演示工具条的使用。</span>"
            ]
        }).toolbar("toolbar");

        var options = {
            idField: "ID",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: toolbar,
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-common-data.json"
        };

        $("#dg").datagrid(options);

        top.window.$("#home-layout").layout("collapse", "west").layout("collapse", "east");
    });
</script>